html,body{
  background: #f2f2f2;
}
.userCenter{
  margin:0 auto;
  max-width:640px;
  .top{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:6.4rem;
    height:2.54rem;
    background:url("../images/userCenter/banner.jpg") no-repeat;
    background-size:100% 100%;
    >a{
      display:block;
      width:60px;
      height:40px;
      &.signIn{
        border:1px solid #fff;
        line-height:40px;
        text-align:center;
        color:#fff;
      }
      &.signUp{
        border:1px solid #fff;
        line-height:40px;
        text-align:center;
        color:#fff;
      }
    }
  }
  .nav{
    display:flex;
    height:1.8rem;
    justify-content: space-around;
    align-items: stretch;
    background: #fff;
    margin-bottom:20px;
    >a{
      display:flex;
      width:1.2rem;
      text-align: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        width:.8rem;
        height:.8rem;
      }
      span{
        display:inline-block;
        line-height:.5rem;
      }
    }
  }
  .userNav{
    padding:0 20px;
    margin-bottom:20px;
    border-top:1px solid #dbdbdb;
    border-bottom:1px solid #dbdbdb;
    background:#fff data-uri("../images/userCenter/gift.png") 100% 0 no-repeat;
    background-size:30px 30px;
    >a{
      box-sizing:content-box;
      display:flex;
      justify-content: space-between;
      align-items: center;
      height:1rem;
      .icon{
        width:20px;
        height:20px;
      }
      .word{
        padding:0 20px;
        flex-grow: 1;
      }
      .go{
        width:7px;
        height:14px;
        background:data-uri("../images/userCenter/go.jpg") no-repeat;
        background-size:7px 14px;
      }
      &.newBenefits{
        border-bottom:1px solid #dbdbdb;
        .icon{
          background:data-uri("../images/userCenter/icon_newBenefits.png") no-repeat;
          background-size:20px 20px;
        }
        .word{
          img{
            width:51px;
            height:15px;
          }
        }
      }
      &.subscription{
        border-bottom:1px solid #dbdbdb;
        .icon{
          background:data-uri("../images/userCenter/icon_subscription.png") no-repeat;
          background-size:20px 20px;
        }
      }
      &.orders{
        .icon{
          background:data-uri("../images/userCenter/icon_orders.png") no-repeat;
          background-size:20px 20px;
        }
      }
    }
  }
  .serviceNav{
    padding: 0 20px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    background: #fff;
    >a{
      box-sizing:content-box;
      display:flex;
      justify-content: space-between;
      align-items: center;
      height:1rem;
      .icon{
        width:20px;
        height:20px;
      }
      .go{
        width:7px;
        height:14px;
        background:data-uri("../images/userCenter/go.jpg") no-repeat;
        background-size:7px 14px;
      }
      .word{
        padding:0 20px;
        flex-grow: 1;
      }
      &.answer{
        .icon{
          background: data-uri("../images/userCenter/icon_answer.png") no-repeat;
          background-size:20px 20px;
        }
        border-bottom:1px solid #dbdbdb;
      }
      &.service{
        .icon{
          background: data-uri("../images/userCenter/icon_service.png") no-repeat;
          background-size:20px 20px;
        }
        .word{
          display:flex;
          justify-content: space-between;
        }
      }
    }
  }
}